<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue2.0_component_3</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>vue2.0_component_3-Component 父子组件关系</h1>
在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件，这就需要一个父子组件关系。

<h3>一、构造器外部写局部注册组件 </h3>
上面上课我们都把局部组件的编写放到了构造器内部，如果组件代码量很大，会影响构造器的可读性，造成拖拉和错误。

我们把组件编写的代码放到构造器外部或者说单独文件。

我们需要先声明一个对象,对象里就是组件的内容。
<h3>二、父子组件的嵌套</h3>
我们先声明一个父组件，比如叫jspang，然后里边我们加入一个city组件，
在父组件里写子组件时 需要先在父组件里声明子组件的存在

    <hr>
    <div id="app">
      <panda></panda>
    </div>
    <script>
    var city = {
      template:`
        <p style="color:green;">钓鱼岛 是中国的</p>
      `
    }
    var pandaComponent = {
      template:`
      <div>
        <p>熊猫来自中国的</p>
        <city></city>
      </div>
      `,
      components:{
        "city":city
      }
    }
        var app=new Vue({
            el:"#app",
            data:{

            },
            components:{
              "panda":pandaComponent
            }
        })
    </script>
</body>
</html>
